import { Component, input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { numberSort, stringSort, sortStatev } from '../../utils/sort';
@Component({
  selector: 'app-form',
  imports: [],
  providers: [HttpClient],
  templateUrl: './form.component.html',
  styleUrl: './form.component.css'
})
export class FormComponent {
  value = input<any>({
    type: '0',
    name: '数据异常'
  });
  list: any = {};//数据
  lists: any[] = [];//渲染数据
  title = this.value().name;//标题
  numbersortState: number = 0; // 数字排序状态
  stringsortState: number = 0; // 字符串排序状态
  sottitem: string = ""//当前排序的列
  constructor(public http: HttpClient) { }
  
  // 数据获取
  getData() {
    console.log(this.value().name);
    let api = 'http://localhost:3000/api/data';
    this.http.get(api, { params: { value: this.value().type } }).subscribe((response: any) => {
      this.list = response;
      this.lists = this.list.data
    });
  }
  // sortvalue(index: any) {
  //   if (this.list.msg === 1) {
  //     if (this.numbersortState === 0) {
  //       this.sottitem = index
  //       this.numbersortState = sortStatev(this.numbersortState)
  //       this.lists = numberSort(this.list.data, index, this.numbersortState)
  //     }
  //     else {
  //       if (this.sottitem === index) {
  //         this.numbersortState = sortStatev(this.numbersortState)
  //         this.lists = numberSort(this.list.data, index, this.numbersortState)
  //       } else {
  //         this.sottitem = index
  //         this.numbersortState = 0
  //         this.lists = numberSort(this.list.data, index, this.numbersortState)
  //       }
  //     }
  //   }
  //   else {
  //     if (this.stringsortState === 0) {
  //       this.sottitem = index
  //       this.stringsortState = sortStatev(this.stringsortState)
  //       this.lists = stringSort(this.list.data, index, this.stringsortState)
  //     }
  //     else {
  //       if (this.sottitem === index) {
  //         this.stringsortState = sortStatev(this.stringsortState)
  //         this.lists = stringSort(this.list.data, index, this.stringsortState)
  //       } else {
  //         this.sottitem = index
  //         this.stringsortState = 0
  //         this.lists = stringSort(this.list.data, index, this.stringsortState)
  //       }
  //     }
  //   }
  // }
  sortvalue(index: any) {
    // ===================== 类型定义 =====================
    // 定义状态属性名的联合类型，限制只能是这两个合法属性
    type SortType = 'numbersortState' | 'stringsortState';
    // 定义排序函数的联合类型，可以是数字排序或字符串排序函数
    type SortFunction = typeof numberSort | typeof stringSort;
  
    // ================= 初始化排序配置 ==================
    // 判断是否数字排序：当 list.msg 为 1 时使用数字排序逻辑
    const isNumberSort = this.list.msg === 1;
    
    // 解构赋值获取对应的状态属性名和排序函数
    const [stateKey, sortFn]: [SortType, SortFunction] = isNumberSort
      ? ['numbersortState', numberSort]  // 数字排序配置
      : ['stringsortState', stringSort]; // 字符串排序配置
  
    // 获取当前排序状态 (0: 未排序, 1: 升序, 2: 降序)
    let currentState = this[stateKey];
  
    // ================ 状态管理逻辑 ================
    // 初始状态处理 (状态0表示未排序)
    if (currentState === 0) {
      // 记录当前排序的列索引
      this.sottitem = index;
      // 更新排序状态 (0 → 1)
      this[stateKey] = currentState = sortStatev(currentState);
    } else {
      // 当点击同一个排序项时
      if (this.sottitem === index) {
        // 循环切换排序状态 (1 → 2 → 0)
        this[stateKey] = currentState = sortStatev(currentState);
      } else {
        // 切换不同排序项时：
        this.sottitem = index;    // 更新当前排序项
        this[stateKey] = currentState = 0; // 重置新项的状态为初始状态
      }
    }
  
    // ================= 执行排序操作 =================
    // 参数说明：
    // 1. this.list.data: 原始数据数组
    // 2. index: 当前排序的列索引
    // 3. currentState: 当前排序状态
    // 结果更新到 lists 属性，触发视图更新
    this.lists = sortFn(this.list.data, index, currentState);
  }
  ngOnInit(): void {
    this.getData();
  }
}
